<template>
  <view class="page-wrapper">
    <view class="login-form-panel">
      <wd-form ref="form" :model="model">
        <view class="title">体育赛程管理系统</view>
        <wd-cell-group border>
          <wd-input
            label="用户名"
            label-width="100px"
            prop="username"
            clearable
            v-model="model.username"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <wd-input
            label="密码"
            label-width="100px"
            prop="password"
            show-password
            clearable
            v-model="model.password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </wd-cell-group>
        <view class="footer">
          <wd-button type="primary" size="large" @click="handleSubmit" block
            >提交</wd-button
          >
        </view>
      </wd-form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { login } from "@/service/user";
import { useToast } from "wot-design-uni";
const { success: showSuccess } = useToast();

const model = ref<{
  password: string;
  username: string;
}>({
  password: "",
  username: "",
});

const form = ref();

async function handleSubmit() {
  const validateRes = await form.value.validate();
  if (!validateRes.valid) {
    return;
  }
  const loginRes = await login(model.value.username, model.value.password);
  if (loginRes.code === "0000" && loginRes.data) {
    showSuccess("登录成功");
    uni.redirectTo({
      url: "/pages/index/index",
    });
    uni.setStorageSync("token", loginRes.data.access_token);
  } else {
    showSuccess(loginRes.msg || "登录失败");
  }
}
</script>

<style>
.footer {
  padding: 12px;
  margin-top: 18px;
}
.title {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}
.page-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.login-form-panel {
  width: 600rpx;
  padding: 35rpx;
  margin-bottom: 20vh;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px);
  border-radius: 10px;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.2),
    0 9px 28px 8px rgba(0, 0, 0, 0.1);
}
</style>
